/*
 * 有赞订单详情信息
 * @Author: zfx
 * @Date: 2018-07-19 9:30:27
 */
<style lang="less" rel="stylesheet/less" type="text/less">
    .ivu-layout {
        background: #fff;
        padding: 0;
        .ivu-content-div {
            margin-bottom: 15px;
            .ivu-content-div-p {
                padding: 10px 20px;
                border-bottom: 1px solid #eee;
                display: flex;
				justify-content: space-between;
				.ivu-content-div-p-red {
					color: red;
				}
				.ivu-content-div-p-green {
					color: green;
				}
            }
            .ivu-content-div-p-right {
                text-align: right;
                .ivu-content-div-p-right-span {
                    color: red;
                    font-size: 16px;
                    font-weight: bold;
                    padding: 0 3px;
                }
            }
            .info{
                text-align: left;
                white-space: nowrap;
                padding: 5px 0;
            }
            .info-thumb{
                width: 60px;
                height: 60px;
                display: table-cell;
                cursor: pointer;
                img{
                    width: 100%;
                }
            }
            .info-title{
                height: 60px;
                display:  table-cell;
                white-space: normal;
                vertical-align: middle;
                padding-left: 8px;
            }
        }
    }
</style>

<template>
	<Layout>
		<Content>

			<div class="ivu-content-div">
				<h4>{{ `${$t('favorable_order.gain_information')}：` }}</h4>
				<p class="ivu-content-div-p">
					<span>{{ `${$t('favorable_order.consignee_name')}：` + addressInfo.receiver_name }}</span>
					<span>{{ `${$t('favorable_order.consignee_telephone')}：` + addressInfo.receiver_tel }}</span>
					<span>{{ `${$t('favorable_order.consignee_address')}：` + addressInfo.delivery_province +
						addressInfo.delivery_city +
						addressInfo.delivery_district +
					addressInfo.delivery_address }}</span>
				</p>
			</div>

			<div class="ivu-content-div">
				<h4>{{ `${$t('favorable_order.order_information')}：` }}</h4>
				<p class="ivu-content-div-p">
					<span>{{ `${$t('favorable_order.order_number')}：` + orderInfo.tid }}</span>
					<span>{{ `${$t('favorable_order.retail_orders')}：` }}{{ orderInfo.is_retail_order ? $t('favorable_order.yes') : $t('favorable_order.no') }}</span>
					<span>{{ `${$t('favorable_order.creation_time')}：` }}{{ orderInfo.created || $t('favorable_order.unknown') }}</span>
					<span>{{ `${$t('favorable_order.payment_time')}：` }}{{ orderInfo.pay_time || $t('favorable_order.unknown') }}</span>
					<span>
						{{ `${$t('favorable_order.current_order_status')}：` }}
						<span
							:class="Number(orderInfo.close_type) !== 0 ? 'ivu-content-div-p-red' : 'ivu-content-div-p-green'">
							{{ orderInfo.status_str }}</span>
					</span>
				</p>
				<p class="ivu-content-div-p">
					<span>{{ `${$t('favorable_order.buyer_note')}：` }}{{ remarkInfo.buyer_message || $t('favorable_order.unknown') }}</span>
				</p>
			</div>

			<div class="ivu-content-div">
				<Table
					:columns="columns"
					:data="productsInfo"
					border/>
			</div>

			<div class="ivu-content-div">
				<p class="ivu-content-div-p-right">
					<span>{{ `${$t('favorable_order.total_order_amount')}：` }}<span class="ivu-content-div-p-right-span">{{ payInfo.payment || '0.00' }}</span>{{ $t('favorable_order.yuan') }}</span>
				</p>
			</div>

		</Content>
	</Layout>
</template>

<script>
import showPictureMixin from 'src/views/mixins/showPictureMixin';

export default {
	name: 'YouzanOrderDetails',
	mixins: [showPictureMixin],
	props: {
		addressInfo: {
			type: Object,
			default() {
				return {};
			},
		},
		remarkInfo: {
			type: Object,
			default() {
				return {};
			},
		},
		payInfo: {
			type: Object,
			default() {
				return {};
			},
		},
		buyerInfo: {
			type: Object,
			default() {
				return {};
			},
		},
		productsInfo: {
			type: Array,
			default() {
				return [];
			},
		},
		sourceInfo: {
			type: Object,
			default() {
				return {};
			},
		},
		orderInfo: {
			type: Object,
			default() {
				return {};
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return false;
			},
		},
		orderPromotion: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('favorable_order.title'),
					key: 'title',
					align: 'center',
					render: (h, { row }) => {
						const thumb_image = row.pic_path ? <img onClick={() => this.showPicture(row.pic_path)} src={ row.pic_path } alt="无" /> : this.$t('favorable_order.unknown');
						const title = row.title ? row.title : this.$t('common.none');
						return (
							<div class="info">
								<div class="info-thumb">{ thumb_image }</div>
								<div class="info-title">{ title }</div>
							</div>
						);
					},
				},
				{
					title: this.$t('favorable_order.attribute'),
					key: 'sku_properties_name',
					width: 140,
					align: 'center',
					render: (h, { row }) => <div> { row.sku_properties_name || '-' } </div>,
				},
				// {
				// 	title: this.$t('favorable_order.state'),
				// 	key: 'this.orderInfo.status_str',
				// 	align: 'center',
				// 	render: (h, { row }) => <div> { this.orderInfo.status_str || row } </div>,
				// },
				{
					title: this.$t('favorable_order.unit_price'),
					key: 'price',
					width: 140,
					align: 'center',
					render: (h, { row }) => <div> { `￥${row.price}` || '-' } </div>,
				},
				{
					title: this.$t('favorable_order.promotion_price'),
					key: 'adjust_fee',
					align: 'center',
					width: 140,
					render: (h, { row }) => <div> { `￥${(Number(row.price) - Number(this.orderPromotion.adjust_fee)).toFixed(2)}` || '-' } </div>,
				},
				{
					title: this.$t('favorable_order.number'),
					key: 'num',
					align: 'center',
					width: 90,
					render: (h, { row }) => <div> { row.num || '-' } </div>,
				},
				{
					title: this.$t('favorable_order.preferential'),
					key: 'points_price',
					width: 140,
					align: 'center',
					render: (h, { row }) => <div> { Number(row.points_price).toFixed(2) || '-' } </div>,
				},
				{
					title: this.$t('favorable_order.total_price'),
					key: 'total_fee',
					align: 'center',
					width: 160,
					render: (h, { row }) => (
						<div>
							<div> { `￥${((Number(row.payment) + Number(this.payInfo.post_fee)).toFixed(2))}` || '-' } </div>
							<div> { `(${this.$t('favorable_order.courier')}${this.payInfo.post_fee})` } </div>
						</div>
					),
				},
			],
		};
	},
	methods: {

	},

};
</script>
